import { Component } from '/src/components/component/component.js';
import { TemplateManager } from '/src/util/templatemanager/templatemanager.js'

export class InputComponent extends Component {
    /**
     * 输入框组件
     * @param {string|jQuery|HTMLElement} container - 容器
     * @param {Object} options
     * @param {string} options.fieldName - input 的 id 和 col 属性
     * @param {string} options.name - 显示的标签文本
     */
    constructor(container, options) {
        super(container, options);
        this.fieldName = options.fieldName;
        this.label = options.name;
        this.templateUrl = '/src/components/component/searchbar/input-component.html';
    }

    async init() {
        await this.render();
    }

    async render() {
        let html = await TemplateManager.loadTemplate(this.templateUrl, {
            fieldName: this.fieldName,
            label: this.label,
            cid: this.cid
        });

        this.container.append(html);
        this.$input = this.container.find(`#${this.fieldName}`);
    }

    /**
     * 获取输入框的值
     * @returns {string}
     */
    getValue() {
        return this.container.find('input').val().trim();
    }

    /**
     * 设置输入框的值
     * @param {string} value
     */
    setValue(value) {
        this.container.find('input').val(value);
    }

    /**
     * 清空输入框
     */
    clear() {
        this.setValue('');
    }

    destroy() {
        if (this.$input) {
            this.$input.off(); // 解绑输入事件
        }
        if (this.$el && this.$el.parent().length) {
            this.$el.remove(); // 从 DOM 移除
        }
        this.off(); // 解绑自定义事件
        super.destroy?.(); // 如果基类有 destroy
    }
}